<template>
  <div class="register">
    <div class="container-left">
      <span>新用户注册</span>
      <!-- <span class="container-right">
        已有账户？
        <a href="/bindex" style="color:blue" >点我登录</a>
      </span>-->
    </div>

    <div>
      <el-container class="container">
        <el-main>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名/昵称" prop="username">
              <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="userphone">
              <el-input v-model="ruleForm.userphone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="邮箱/Email" prop="Email">
              <el-input v-model="ruleForm.Email" placeholder="请输入邮箱号码，推荐使用QQ邮箱"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-col :span="11">
                <el-form-item>
                  <el-date-picker
                    type="date"
                    placeholder="出生日期"
                    value-format="yyyy-MM-dd"
                    v-model="ruleForm.userBirthday"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
               
              </el-col>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="ruleForm.code" style="width:140px"></el-input>
              <el-button @click="getRegisterCode()">获取验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register('ruleForm')">立即注册</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      ruleForm: {
        inputCode: "", //发送给用户的验证码
        username: "贱帅",
        Email: "2523196270@qq.com",
        password: "123456uy",
        userBirthday: "",
        userphone: "13128331975",
        gender: 1,
        code: ""
      },
      rules: {
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "验证码的长度是6位",
            trigger: ["blur", "change"]
          }
        ],
        username: [
          { required: true, message: "请输入用户名/昵称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度不能超过16个字符",
            trigger: ["blur", "change"]
          }
        ],
        Email: [
          { required: true, message: "请输入邮箱号码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式错误，或邮箱号码中包含中文字符"
          }
        ],
        userphone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
            message: "请输入正确的中国大陆手机号码"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,16}$/,
            message:
              "格式：密码位数在8-16个，且字母、数字和标点符号至少包含两种"
          }
        ]
      }
    };
  },
  methods: {
    //注册
    register(formName) {
     
      if (this.inputCode !== this.ruleForm.code) {
        this.$message.error("请输入正确的验证码");
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios({
            method: "post",
            params: {
              userPhone: this.ruleForm.userphone,
              userEmail: this.ruleForm.Email,
              userSex: this.ruleForm.gender,
              userName: this.ruleForm.username,
              userPwd: this.ruleForm.password,
              userBirthday: this.ruleForm.userBirthday,
              code: this.ruleForm.code
            },
            url: "http://localhost:8090/user/register"
          })
            .then(r => {
  
              this.$message({
                message: "恭喜你，注册成功！账号已发送到邮箱，赶快去登录体验一下吧^_^",
                type: "success"
              });
         
              this.$router.push('/bindex')
              // window.location.href="http://localhost:8080/bindex";
            }).catch(error => {
              this.$message({
                showClose: true,
                message: error.response.data.message,
                type: "error"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //向后端发送请求获取验证码
    getRegisterCode() {
      if (this.ruleForm.Email === null || this.ruleForm.Email === "") {
        this.$message.error("请填写邮箱号码后在来获取验证码");
        return;
      }
      this.axios({
        methods: "get",
        params: {
          //这个是附加传值，需要传入后端的值填写到这里，如没有则不写params
          to: this.ruleForm.Email
        },
        url: "http://localhost:8090/user/registerCode"
      })
        .then(r => {
          this.$message("验证码已发送，请及时查收！");
          
          //执行成功后的返回数据就是r.data
          this.inputCode = r.data;
         this.$message(this.inputCode);
        })
        //出现异常后调取的方法
        .catch(error => {
          // 获取到后端抛出的异常信息
          // alert(error.response.data.message);
          this.$message(error.response.data.message);
          // console.log(error.response);
        });
    }
  }
};
</script>
<style   scoped>
.register {
  margin: 100px auto;
  background-color: rgb(187, 202, 233);
  width: 60%;
  height: 40%;
  padding-left: 200px;
}
.container {
  padding: 10px;
  width: 70%;
}
.container-left {
  width: 900px;
  font-size: 20px;
  position: relative;
  left: -200px;
}
/* .container-right {
  font-size: 16px;
  padding-left: 600px;
} */
</style>